<style lang="less" scoped>
  .table__con {
    position: relative;
    .table--add {
      position: absolute;
      right: 0;
      top: 2px;
      z-index: 999;
    }
  }
</style>
<template>
  <el-dialog :visible.sync="currentShowFlag" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" @open="handleDialogOpen" @closed="handleDialogClosed">
    <div slot="title" class="detail-dialog__header">{{$t('system_role.detailDialog')}}</div>
    <simple-form ref="form" v-model="formModel" label-width="80px" :form-field="formField" :grid="{span: 24}" :view-flag="viewFlag"></simple-form>
    <div slot="footer">
      <el-button @click="handleDialogClose">{{viewFlag ? $t('operation.close') : $t('operation.cancel')}}</el-button>
      <el-button type="primary" @click="handleDataSubmit" v-if="!viewFlag">{{$t('operation.submit')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
const BASEURL = {
  save: '/Web/SysAdmin/ajax.html?sys_method=Add&sys_objName=Sys_Role',
  update: '/Web/SysAdmin/ajax.html?sys_method=Update&sys_objName=Sys_Role'
}
export default {
  name: 'sys_role_detail',
  data () {
    return {
      formModel: {}
    }
  },
  inject: ['handleDataSearch'],
  computed: {
    currentShowFlag: {
      get () { return this.showFlag },
      set (val) { this.$emit('update:showFlag', val) }
    },

    status () { return this.$getDictList('data_status') },

    formField () {
      return [
        {
          prop: 'rolename',
          label: this.$t('system_role.name'),
          type: 'Input',
          rules: { trigger: 'blur', message: this.$t('validate.notBlank'), required: true }
        },
        {
          prop: 'notes',
          label: this.$t('system_role.remarks'),
          type: 'Input',
          component: { type: 'textarea' },
          col: { xs: 24, sm: 24, md: 24 }
        }
      ]
    }
  },
  props: {
    showFlag: { type: Boolean, default: false },
    viewFlag: { type: Boolean },
    detailData: { type: Object },
    extData: { type: Object }
  },
  methods: {
    handleDialogClose () {
      this.currentShowFlag = false
    },

    handleDataSubmit () {
      this.$refs.form.$refs.simpleForm.validate(status => {
        if (status) {
          let loadingFlag = this.$loading({ target: this.$el.querySelector('.el-dialog') })
          let submitModel = Object.assign({}, this.$_.cloneDeep(this.formModel), { sys_mid: this.extData.sys_mid })
          this.$axios
            .post(this.detailData.roleid ? BASEURL.update : BASEURL.save, submitModel)
            .then(resp => {
              this.currentShowFlag = false
              this.$message({ type: 'success', message: this.$t('tip.saveSuccess') })
              this.handleDataSearch()
            })
            .finally(() => {
              loadingFlag.close()
            })
        }
      })
    },

    handleDialogOpen () {
      this.formModel = Object.assign({}, this.formModel, this.detailData)
    },

    handleDialogClosed () {
      this.$refs.form.resetFields()
      this.formModel = {}
    }
  }
}
</script>
